<template>
  <section>
    <Header :leftArrow="false" :search="false" title="首页"/>
    <section class="home">
      <div class="home-content-wrapper">
        <div class="home-content">
          <div class="home_header">
            <img src="./images/avatar.png" alt="">
            <div class="home_header_content">
              <div class="user_name">
                <span class="user_name_color">张三</span>
                <span class="user_name2_color">(老师)</span>
              </div>
              <p class="user_phone">手机号：13327571240</p>
            </div>
          </div>
          <van-cell-group>
            <van-cell title="用户管理" is-link to="/userControl" />
            <van-cell title="课程管理" is-link to="/courseControl" />
            <van-cell title="发布课程" is-link to="index" />
            <van-cell title="上课记录" is-link to="index" />
            <van-cell title="消费记录" is-link to="index" />
          </van-cell-group>
        </div>
      </div>
    </section>
  </section>
</template>

<script>
import BScroll from 'better-scroll'
import User from '../../service/user'
import Header from '../../components/Header/NoLeftArrowHeader'

export default {
  name: 'Home',
  components: {
    Header
  },
  data() {
    return {
      testDatas: []
    }
  },
  watch: {
    testDatas(value) {
      this.$nextTick(() => {
        new BScroll('.home-content-wrapper', {
          click: true
        })
      })
    }
  },
  mounted() {
    for (let i = 0; i < 50; i++) {
      this.testDatas.push({
        title: '测试专用'
      })
    }

    User.login(111, 222)
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">
@import "../../common/css/mixins.less";

.home {
  width: 100%;

  .home-content-wrapper {
    position: fixed;
    top: 46px;
    bottom: 50px;
    width: 100%;

    .home_header {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 45px 10px;

      > img {
        width: 70px;
        height: 70px;
      }
    }

    .home_header_content {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 70px;
      padding: 10px;
      box-sizing: border-box;

      .user_name {
        .user_name_color {
          font-size: 20px;
        }

        .user_name2_color {
          color: #AFAFAF;
          font-size: 16px;
        }
      }

      .user_phone {
        font-size: 16px;
        color: #AFAFAF;
      }
    }

    .test2 {
      font-size: 20px;
      margin-top: 5px;

      li {
        font-size: 16px;
      }
    }
  }
}
</style>
